<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../../styles/common.css"/>
    <link rel="stylesheet" href="../../../styles/page.css"/>
    <link rel="stylesheet" href="../../../styles/bttn.min.css"/>

</head>
<body>
<div class="dashboard-container" id="grant-app">
    <div class="container">
        <div class="tableBar">
            <el-input v-model="input"
                      placeholder="请输入学号"
                      style="width: 250px"
                      clearable
                      @keyup.enter.native="handleQuery"
            >
                <i
                        slot="prefix"
                        class="el-input__icon el-icon-search"
                        style="cursor: pointer"
                        @click="handleQuery"
                ></i>
            </el-input>
        </div>
        <el-table
                :data="tableData"
                stripe
                class="tableBox"
                :span-method="SpanMethod"
                :header-cell-style="{background:'#eef1f6',color:'#606266',fontSize:'18px'}"
        >
            <el-table-column
                    prop="volunteerStunum"
                    label="学号"
            >
                <span slot="label" style="font-size: 18px">
                    学号：
                </span>
                <template slot-scope="scope">
                    <div style="font-size: 18px">
                        {{ scope.row.volunteerStunum}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="volunteerPho"
                    label="电话"
            >
                <template slot-scope="scope">
                    <div style="font-size: 18px">
                        {{ scope.row.volunteerPho}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="volunteerPermission"
                    label="账号状态"
            >
                <template slot-scope="scope">
                    <div style="font-size: 18px">
                        {{ scope.row.volunteerPermission}}
                        <el-button type="primary" icon="el-icon-edit" round @click="handleInfo(scope.row.id)">账号详情
                        </el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="160"
                    align="center"
            >
                <template slot-scope="scope">
                    <div v-if=handleGrant()>
                        <el-button
                                type="text"
                                size="small"
                                class="blueBug"
                                @click="grantStatus(scope.row.id,'admin',scope.row.volunteerStunum)"
                                :class="{notAdmin:user !== 'admin'}"
                                v-if="scope.row.volunteerPermission == 'user'"
                        >
                            <template>
                                <div style="font-size: 15px">
                                    授权
                                </div>
                            </template>
                        </el-button>
                        <el-button
                                type="text"
                                size="small"
                                class="delBut non"
                                @click="grantStatus(scope.row.id,'user',scope.row.volunteerStunum)"
                                v-if="scope.row.volunteerPermission == 'admin'"
                        >
                            <template>
                                <div style="font-size: 15px">
                                    撤销权限
                                </div>
                            </template>
                        </el-button>
                        <el-button type="text" class="delBut non" @click="deleteUser(scope.row.id)" v-if="scope.row.volunteerPermission == 'user' || scope.row.volunteerPermission == 'admin' ">
                            <template>
                                <div style="font-size: 15px">
                                    删除账号
                                </div>
                            </template>
                        </el-button>
                        <div style="font-size: 17px;font-weight: bolder" v-if="scope.row.volunteerPermission == 'superAdmin'"
                        >
                            超级管理员账号<br/>不可操作!
                        </div>
                    </div>
                    <div v-if=!handleGrant() style="font-size: 17px;font-weight: bolder">
                        没有操作权限！
                    </div>
                </template>

            </el-table-column>
        </el-table>
        <el-pagination
                class="pageList"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
                :current-page.sync="page"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        ></el-pagination>
        <el-dialog
                title="详细信息"
                :visible.sync="dialogVisible"
                width="50%"
                append-to-body
        >
            <div style="height: 200px">
                                <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                    学号:   {{this.diaNum}}
                                </span>
                <br/><br/>
                <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                       姓名:    {{this.diaName}}
                                    </span>
                <br/><br/>
                <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                    电话: {{this.diaPho}}
                                </span>
                <br/><br/>
                <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                        帐号状态: {{this.diaPer}}
                                    </span>
                <br/><br/>
                <span slot="label" style="font-size: 20px;color: #002f64;font-weight: bolder">
                                        服务时长: {{this.diaTime}}
                        <el-popover
                                placement="top"
                                width="350"
                                v-model="visible">
                            <el-input v-model="editTimeinput" placeholder="请输入修改后的志愿时长(小时)"
                                      style="width: 250px"></el-input>
                            <el-button @click="handleServeTime()">确定</el-button>
                            <el-button type="text" class="blueBug" size="mini" slot="reference">修改</el-button>
                            </el-popover>
                </span>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</div>
<script src="../../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>
<script src="../../../js/request.js"></script>
<script src="../../../api/volunteer.js"></script>
<script>
    new Vue({
        el: '#grant-app',
        data() {
            return {
                editTimeinput: '',
                input: '',
                counts: 0,
                page: 1,
                pageSize: 10,
                tableData: [],
                id: '',
                volunteerPermission: '',
                dialogVisible: false,
                diaId: '',
                diaNum: '',
                diaName: '',
                diaPer: '',
                diaTime: '',
                diaPho: '',
                visible: false,
                handlerPermission: '',
            }
        },
        computed: {},
        created() {
            if (window.localStorage.getItem('adminInfo') === null) {
                window.location.href = '../login/loginBackend.html'
            }
            this.init()
            this.handlerPermission = JSON.parse(localStorage.getItem('adminInfo')).volunteerPermission
            console.log(this.handlerPermission)
        },
        mounted() {
        },
        methods: {
            async init() {
                const params = {
                    page: this.page,
                    pageSize: this.pageSize,
                    stuNum: this.input ? this.input : undefined
                }
                await getVolunteerList(params).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data.records || []
                        this.counts = res.data.total
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            handleQuery() {
                this.page = 1;
                this.init();
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.init()
            },
            handleCurrentChange(val) {
                this.page = val
                this.init()
            },
            async grantStatus(userId, status, stuNum) {
                let str = '';
                if (status === 'admin') {
                    str = '确定给学号：' + stuNum + ' 授权吗？'
                } else {
                    str = '确定撤销学号：' + stuNum + ' 的权限吗？'
                }
                this.$confirm(str, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const params = {
                        id: userId,
                        volunteerPermission: status
                    }
                    RegisOrGrant(params).then(res => {
                        if (String(res.code) === '1') {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            })
                        }
                        this.init()
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            deleteUser(st) {
                this.$confirm('此操作将删除此账号, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteVolunteer(st).then(res => {
                        if (String(res.code) === '1') {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.init();
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            SpanMethod({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 3) {
                    return [1, 2];
                }
            },

            handleInfo(st) {
                getVolunteer(st).then(res => {
                    if (String(res.code === 1)) {
                        this.diaId = res.data.id
                        this.diaNum = res.data.volunteerStunum
                        this.diaName = res.data.volunteerName
                        this.diaPer = res.data.volunteerPermission
                        this.diaTime = res.data.volunteerTime
                        this.diaPho = res.data.volunteerPho
                    }
                    this.dialogVisible = true
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            handleServeTime() {
                let strInfo = '确定给学号 ' + this.diaNum + ' 姓名 ' + this.diaName + ' 志愿服务时长修改为 ' + this.editTimeinput + ' 小时?'
                this.$confirm(strInfo, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const params = {
                        id: this.diaId,
                        volunteerTime: this.editTimeinput,
                    }
                    addTime(params).then(res => {
                        if (String(res.code) === '1') {
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                            this.dialogVisible = false
                        }
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            handleGrant() {
                if (this.handlerPermission === 'superAdmin') {
                    return true;
                }
            }
        }
    })
</script>
</body>
</html>